3D 翻轉卡片特效來襲，用 Vue.js 掌控全場，玩轉視覺與互動的完美結合！

嘿～準備好見證魔法般的 3D 翻轉效果了嗎？
今天，我們要用 Vue.js 玩出前所未見的翻轉卡片特效，
讓你的網站從平面設計瞬間變成 3D 動感視覺盛宴！

只要幾步驟，你就能實現讓卡片像魔法一樣翻轉的效果，讓訪客眼睛為之一亮。

不管是產品展示還是交互設計，這個翻轉效果都能為你的網站加分，讓設計變得既高級又酷炫。
別擔心技術難度，這篇文章會把所有步驟拆解得簡單有趣，讓你輕鬆實作這些視覺特效！
一起來打造讓人「哇！」的一頁式網站吧～

3D 翻轉卡片特效的實作

在這個部分，我們將使用 Vue.js 結合 UnoCSS 來快速實現一個 3D 翻轉卡片效果。
透過卡片的前後兩面，在滑鼠懸停時產生 180 度翻轉，為頁面添加更多動感和互動性。

結構與設計思路

• template 部分

<template>
  <div class="h-screen flex justify-center items-center bg-[#cdd9ed]">
    <div class="container cursor-pointer w-[350px] h-[500px] [perspective:800px] bg-[#99A3BA]">
      <div
        class="card h-full w-full relative [transition:transform_1.5s] [transform-style:preserve-3d] hover:[transform:rotateY(180deg)]">
        <!-- Front side -->
        <div
          class="h-full w-full absolute rounded-2xl shadow-[0_0_5px_2px_rgba(50,50,50,0.25)] [backface-visibility:hidden] flex justify-center items-center bg-white text-[#171414]">
          <h2 class="text-5xl font-mono">Hover Me</h2>
        </div>
        <!-- Back side -->
        <div
          class="h-full w-full absolute flex flex-col rounded-2xl justify-center items-center shadow-[0_0_5px_2px_rgba(50,50,50,0.25)] [backface-visibility:hidden] [transform:rotateY(180deg)] bg-[#5628EE] text-black">
          <h2 class="text-5xl font-mono text-white">Back</h2>
        </div>
      </div>
    </div>
  </div>
</template>

卡片結構與設計原則

• 外層容器 (container) 灰色的區塊：

  • 卡片的外層使用一個具有 perspective 屬性的容器，該屬性為卡片設置了 800px 的視角深度，使翻轉效果看起來更真實。
  • 設置了寬度和高度，使卡片具有固定尺寸，並且居中顯示在螢幕中。

• 卡片本體 (card)：

  • 卡片本體使用 transform-style: preserve-3d 保持 3D 效果，使卡片在翻轉時兩面能夠正確顯示。
  • 透過 hover:[transform:rotateY(180deg)]，當滑鼠懸停在卡片上時，卡片會進行 180 度的翻轉，顯示卡片的背面。

前後面卡片樣式設計

• 卡片前面 白色的區塊：

  • absolute 定位使卡片的前後兩面重疊，前面的 div 透過 backface-visibility: hidden 隱藏背面，確保翻轉時看不到背面。
  • 卡片前面的樣式簡潔，以白色背景為主，並在卡片中間顯示「Hover Me」的字樣，吸引使用者互動。

• 卡片背面 藍紫色的區塊：

  • 卡片背面使用與前面相同的絕對定位，並透過 transform: rotateY(180deg) 進行翻轉，使其在卡片背面準備好進行 180 度的顯示。
  • 背面使用藍紫色的背景，並在卡片中間顯示「Back」，給使用者視覺上的明顯區別。

關鍵技術詳解

3D 翻轉效果的實現

• [transform-style: preserve-3d]：

  • 此屬性讓卡片的前後面同時保持 3D 效果，確保當卡片翻轉時，前後兩面能夠以立體的方式顯示，而不會因為翻轉過程出現錯位。

• [perspective: 800px]：

  • 透過設定視角深度，我們讓卡片在翻轉時呈現出更加真實的 3D 效果。較大的 perspective 值能夠讓卡片看起來翻轉得更自然。

• hover:[transform:rotateY(180deg)]：

  • 當滑鼠懸停在卡片上時，卡片會以 Y 軸為基準進行 180 度翻轉，並且因為使用了 transition: transform 1.5s，使翻轉過程更加平滑。

互動設計

• 卡片的互動性：
  • 透過 cursor: pointer 屬性，當使用者滑鼠懸停在卡片上時，指標會變成手勢，鼓勵使用者進行點擊或翻轉。
  • 翻轉效果利用滑鼠的懸停觸發，無需額外的點擊動作即可產生動畫，讓使用者感受到即時的視覺反饋。

元件化與可重用性

這個 3D 翻轉卡片特效可以輕鬆元件化，使其在不同的頁面中重複使用。
只需封裝成一個 Vue 組件，並透過 props 接受卡片內容的傳入，即可實現高效、靈活的使用方式。

未來你可以針對卡片的前後內容進行自訂，甚至擴展至多種卡片設計。

元件化範例：

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps<{
  frontText: string;
  backText: string;
}>();
</script>

<template>
  <div class="container cursor-pointer w-[350px] h-[500px] [perspective:800px] bg-[#99A3BA]">
    <div
      class="card h-full w-full relative [transition:transform_1.5s] [transform-style:preserve-3d] hover:[transform:rotateY(180deg)]">
      <!-- Front side -->
      <div class="front-side h-full w-full absolute flex justify-center items-center">
        <h2 class="text-5xl font-mono">{{ props.frontText }}</h2>
      </div>
      <!-- Back side -->
      <div class="back-side h-full w-full absolute flex justify-center items-center [transform:rotateY(180deg)]">
        <h2 class="text-5xl font-mono text-white">{{ props.backText }}</h2>
      </div>
    </div>
  </div>
</template>

透過這種方式，卡片可以根據需要傳入不同的文字或內容，使得元件更加靈活和可重用。

結論

這個 3D 翻轉卡片特效不僅僅是視覺上的提升，更是一個高互動性的設計元素，能讓你的網站增添更多趣味與創意。
利用簡單的 UnoCSS 與 Vue.js 的組件化特性，你可以輕鬆地實現這個效果，並將其靈活應用於各種場景中。

翻轉不只是特效，還是一種帶來驚喜的互動體驗！😊